<template>
  <div
    ref="echartsPie"
    class="echartsPie"
    :style="{ width: width, height: height }"
  ></div>
</template>
<script setup>
import { ref, onMounted, watch, nextTick } from "vue";
//  按需引入 echarts
import * as echarts from "echarts";
import "echarts-gl";
const emit = defineEmits(["emitPoint","playAll"]); // 定义事件
const echartsPie = ref(); // 使用ref创建虚拟DOM引用，使用时用main.valued
let props = defineProps({
  options: Object,
  titleName: String,
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "100%",
  },
  lengthData: Number,
});
let myChart = null;
onMounted(() => {
  window.addEventListener("resize", resizeChart);
});

function resizeChart() {
  if (myChart) {
    myChart.resize();
  }
}

watch(
  () => props.options,
  (newval, oldval) => {
    nextTick(() => {
      init(newval);
    });
  },
  {
    immediate: true,
    deep: true,
  }
);

async function init(newval) {
  // 基于准备好的dom，初始化echarts实例
  if (!myChart) {
    myChart = echarts.init(echartsPie.value);
  }
  let list = newval;
  let data = [],
    links = [];
  data.push({
    id: "root",
    name: newval.tagName,
    symbolSize: 80,
    draggable: true,
    category: 0,
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "#33C6F0",
          },
          {
            offset: 1,
            color: "#2BA0FF",
          },
        ]),
      },
    },
  });
  for (let i = 0; i < list.tagDevices.length; i++) {
    if (!list.tagDevices[i].camera) break;
    let id = Math.random() + "";
    data.push({
      id: id,
      name: list.tagDevices[i].camera,
      symbolSize: 66,
      category: 1,
      attr: {
        ...list.tagDevices[i]
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#13D1A0",
            },
            {
              offset: 1,
              color: "#019775",
            },
          ]),
        },
      },
    });

    links.push({
      // source: list.tagName,
      // target: list.tagDevices[i].camera,
      source: "root",
      target: id,
    });
    if (list.tagDevices[i].tags && Array.isArray(list.tagDevices[i].tags)) {
      for (let j = 0; j < list.tagDevices[i].tags.length; j++) {
        if (!list.tagDevices[i].tags[j].tagName) break;
        let mathId = Math.random() + "";
        data.push({
          id: mathId,
          name: list.tagDevices[i].tags[j].tagName,
          symbolSize: 60,
          draggable: true,
          category: 3,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#0D7FE8",
                },
                {
                  offset: 1,
                  color: "#0D7FE8",
                },
              ]),
            },
          },
        });

        links.push({
          // source: list.tagDevices[i].camera,
          // target: list.tagDevices[i].tags[j].tagName,
          source: id,
          target: mathId,
        });
      }
    }
  }

  console.log(data);
  console.log(links);

  let option = {
    backgroundColor: "transparent",
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: "quinticInOut",
    // color: ["#83e0ff", "#45f5ce", "#b158ff","red"],
    series: [
      {
        type: "graph",
        layout: "force",
        force: {
          repulsion: 1000,
          edgeLength: 30,
        },
        roam: true,
        label: {
          normal: {
            fontSize: 12,
            lineHeight: 18, // 设置行高
            show: true,
            color: "#FFFFFF", // 所有文字设为白色
            formatter: function (params) {
              const maxLength = 4; // 每行最多4个字符
              const name = params.name;
              let result = "";
              for (let i = 0; i < name.length; i += maxLength) {
                result += name.substr(i, maxLength) + "\n";
              }
              return result.trim();
            },
          },
        },
        data: data,
        links: links,
        lineStyle: {
          normal: {
            color: "#5CA6FF",
            width: 2,
            curveness: 0,
          },
        },
        categories: [{ name: "0" }, { name: "1" }, { name: "2" }],
      },
    ],
  };
  myChart.setOption(option);
  resizeChart();
  // 添加点击事件
  myChart.on("click", function (params) {
    // params 是一个对象，包含了点击的系列信息
    console.log(params.data.attr);
    // alert("你点击了: " + params.name + "，值为: " + params.value);
    if(params.data.id == 'root') {
       emit("playAll"); // 触发事件并传递参数
    }
    if(params.data.attr.cameraIndexCode) {
      emit("emitPoint", params.data.attr.cameraIndexCode); // 触发事件并传递参数
    }
  });
}

onUnmounted(() => {
  if (myChart) {
    myChart.dispose(); // 销毁图表实例
  }
});
</script>
<style scoped>
.echartsPie {
  width: 100%;
  height: 100%;
}
</style>
